<template>
  <div id="mapContainer"></div>
  <popWindows1 v-if="showPop == true" :data="propsData.data" ref="popWindows1" />
  <popWindows2 v-if="showPop == true" :data="propsData.data" ref="popWindows2" />
  <popWindows3 v-if="showPop == true" :data="propsData.data" ref="popWindows3" />
  <popWindows4 v-if="showPop == true" :data="propsData.data" ref="popWindows4" />
  <popWindows5 v-if="showPop == true" :data="propsData.data" ref="popWindows5" />
  <popWindows6 v-if="showPop == true" :data="propsData.data" ref="popWindows6" />
  <popWindows7 v-if="showPop == true" :data="propsData.data" ref="popWindows7" />
  <popWindows8 v-if="showPop == true" :data="propsData.data" ref="popWindows8" />
  <popWindows9 v-if="showPop == true" :data="propsData.data" ref="popWindows9" />
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  computed,
  reactive,
  onMounted,
  onUnmounted,
  toRefs,
  nextTick
} from "vue";
import mapControler from "@/components/mapContainer/mapControler";
import popWindows1 from "@/components/popWindows/windows-1.vue";
import popWindows2 from "@/components/popWindows/windows-2.vue";
import popWindows3 from "@/components/popWindows/windows-3.vue";
import popWindows4 from "@/components/popWindows/windows-4.vue";
import popWindows5 from "@/components/popWindows/windows-5.vue";
import popWindows6 from "@/components/popWindows/windows-6.vue";
import popWindows7 from "@/components/popWindows/windows-7.vue";
import popWindows8 from "@/components/popWindows/windows-8.vue";
import popWindows9 from "@/components/popWindows/windows-9.vue";
import bus from '@/utils/bus'
export default defineComponent({
  components: {
    popWindows1,
    popWindows2,
    popWindows3,
    popWindows4,
    popWindows5,
    popWindows6,
    popWindows7,
    popWindows8,
    popWindows9,
  },
  setup() {
    const flag = ref(false);
    const pops = reactive({
      popWindows1:ref<any>(null),
      popWindows2:ref<any>(null),
      popWindows3:ref<any>(null),
      popWindows4:ref<any>(null),
      popWindows5:ref<any>(null),
      popWindows6:ref<any>(null),
      popWindows7:ref<any>(null),
      popWindows8:ref<any>(null),
      popWindows9:ref<any>(null),
    })
    const propsData = reactive({
      data: {},
    })

    const showPop = ref(false)

    // 生命周期
    onMounted(() => {
      //
      init();
    });

    onUnmounted(() => {
      //
      bus.off('showPolygonPop1',showPolygonPop)
      bus.off('showMapPop',showMapPop)
      mapControler.removeBus()
    })

    // methods
    //初始化地图
    const init = () => {
      mapControler.init()
    };

    const showPolygonPop = async (data)=>{
      showPop.value = true
      await nextTick()
      let infoWin = new data.T.InfoWindow(pops[data.pop].$refs.popW, {
        minWidth: 400,
        maxHeight: 300,
        closeOnClick: true,
      });
      data.polygon.openInfoWindow(infoWin);
      propsData.data = data.data;

      infoWin.addEventListener("close", async (type) => {
        showPop.value = false
        bus.emit('windowClose')
      })
    }
    bus.on('showPolygonPop',showPolygonPop)

    const showMapPop = async (data)=>{
      showPop.value = true
      await nextTick()
      let infoWin = new data.T.InfoWindow(pops[data.pop].$refs.popW, {
        minWidth: 340,
        maxHeight: 300,
        closeOnClick: true,
      });
      data.map.openInfoWindow(infoWin,data.point);
      propsData.data = data.data;

      infoWin.addEventListener("close", async (type) => {
        showPop.value = false
      })
    }
    bus.on('showMapPop',showMapPop)

    return {
      ...toRefs(pops),
      flag,
      propsData,
      showPop
    };
  },
});
</script>

<style lang="scss">
@import "@/assets/scss/index.scss";
#mapContainer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.tdt-infowindow-content-wrapper {
  background: linear-gradient(135deg, rgba(41,73,102,0.6) 0%, rgba(82,155,204,0.6) 100%);
  border-radius: 12px 12px 12px 12px;
  opacity: 1;
  // border: 1px solid ;
  // border-image: linear-gradient(135deg, rgba(204, 231, 255, 1), rgba(204, 231, 255, 0)) 1 1;
  backdrop-filter: blur(2px);
}
.tdt-infowindow-tip {
  background: linear-gradient(135deg, rgba(41,73,102,0.6) 0%, rgba(82,155,204,0.6) 100%);
}
.tdt-container a.tdt-infowindow-close-button {
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  font: 24px/24px Tahoma, Verdana, sans-serif;
  color: #fff;
  z-index: 21;
}
</style>
